<template>
  <div class="main">
    <div class="pageMain">
      <div class="payPageBox">
        <div class="payPageTit">
          <div class="left">
            <h3>收银台</h3>
          </div>
          <div class="right">
            <span class="username" @click="toMyCenter">{{
              userInfo.name
            }}</span>
            <div class="jiange"></div>
            <span class="myorderText" @click="toMyOrder">我的订单</span>
          </div>
        </div>
        <div class="payPageMiddle">
          <div class="orderInfoTxt">
            <span>订单提交成功，请尽快付款！订单号: </span>
            <div class="payTime">
              <span
                >推荐使用
                <i class="iconfont icon-weixin"></i>
                <i class="iconfont icon-zhifubao"></i>扫码支付</span
              >
              <div class="jiange"></div>
              <span
                >请你在
                <p class="time">{{ count }}</p>
                内完成支付，否则订单会被自动取消</span
              >
            </div>
          </div>
          <div class="priceShow">
            <div class="shouldPayMoney">
              <span>应付金额</span>
              <span class="price">￥{{ orderInfo.paymentAmount }}</span
              >元
            </div>
            <div class="detail">
              <span
                class="orderDetaild"
                @click="orderDetailShow = !orderDetailShow"
                >订单详情</span
              >
              <i
                class="iconfont icon-xiajiantou1 size"
                v-if="!orderDetailShow"
              ></i>
              <i
                class="iconfont icon-shangjiantou size"
                v-if="orderDetailShow"
              ></i>
            </div>
          </div>
        </div>
        <div class="orderDetailTxt" v-if="orderDetailShow">
          <div class="addres">
            <span>收货地址:</span>
            <p>{{ addressInfo.address }}</p>
            <span class="preson">收货人:</span>
            <p class="name">{{ addressInfo.name }}</p>
            <p class="phone">{{ addressInfo.phone }}</p>
          </div>
          <div class="goodsName" v-for="item in orderGoodList" :key="item">
            <div class="goodslist">
              <span>商品名称:</span>
              <p>
                {{ item.displayName }}
              </p>
            </div>
          </div>
        </div>
        <div class="payPageType">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1" @click="activeIndex = 1"
              >微信支付<i style="margin: 0 5px" class="iconfont icon-weixin"></i
            ></el-menu-item>
            <el-menu-item index="2" @click="activeIndex = 2"
              >支付宝<i
                style="margin: 0 5px"
                class="iconfont icon-zhifubao"
              ></i></el-menu-item
          ></el-menu>
          <div class="weixinPay" v-show="activeIndex == 1">
            <img src="../../assets/image/weixin.jpg" alt="" />
            <div class="buttonBox">
              <el-button type="primary" @click="paiedOrder"
                >已完成支付</el-button
              >
              <el-button type="primary" @click="viewLoisticall" v-if="isPay"
                >查看物流</el-button
              >
            </div>
          </div>
          <div class="weixinPay" v-show="activeIndex == 2">
            <img src="../../assets/image/zhifubao.jpg" alt="" />
            <div class="buttonBox">
              <el-button type="primary" @click="paiedOrder"
                >已完成支付</el-button
              >
              <el-button type="primary" @click="viewLoisticall" v-if="isPay"
                >查看物流</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 确认收货对话框 -->
    <el-dialog
      v-model="receiveDialogVisible"
      title="物流进度"
      width="50%"
      :before-close="handleClose"
      :open-delay="300"
    >
      <div class="timeLine">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :type="activity.type"
            :hollow="activity.hollow"
            :timestamp="activity.timestamp"
          >
            <div class="titleContent">{{ activity.title }}</div>
            {{ activity.detail }}
          </el-timeline-item>
        </el-timeline>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="receiveDialogVisible = false">确定</el-button>
          <el-button type="primary" @click="confirmReceiveGood"
            >确认收货</el-button
          >
        </span>
      </template>
    </el-dialog>
    <footer-view></footer-view>
  </div>
</template>

<script>
import { payOrderInfo, confirmReceiveGoods } from "@/api/user";
export default {
  data() {
    return {
      receiveDialogVisible: false,
      orderDetailShow: false,
      // 判断是否支付
      isPay: false,
      activeIndex: "1",
      count: "", //倒计时
      seconds: 86400, // 1天的秒数
      orderId: "",
      addressInfo: {},
      orderInfo: [],
      shouldPayMoney: 0,
      userInfo: {},
      orderGoodList: [],
      activities: [
        {
          classId: 1,
          title: "已下单",
          detail: "订单提交成功",
          timestamp: "2020－07-11  16:20:00",
          step: [],
        },
        {
          classId: 2,
          title: "已支付",
          detail: "订单支付成功，等待海关清关",
          timestamp: "2020－07-11  16:22:00",
          step: [],
        },
        {
          classId: 3,
          title: "仓库作业中",
          detail: "订单打包完成",
          timestamp: "2020－07-11  16:20:00",
        },
        {
          classId: 4,

          title: "已出库",
          detail: "包裹已出库来自：合肥保税仓",
          timestamp: "2020－07-11  16:20:00",
        },
        {
          classId: 5,
          title: "运输中",
          detail: "【合肥市】到达  合肥政务区服务网点",
          timestamp: "2020－07-11  16:20:00",
        },
        {
          classId: 6,
          tel: "18817580976",
          title: "派送中",
          detail:
            "【合肥市】政务区代派派件员陈世峰电话:18817580976当前正在为您派件",
          timestamp: "2020－07-11  16:20:00",
        },
        {
          classId: 7,
          title: "已签收",
          detail:
            "【合肥市】已签收，快递已被合肥政务区置地广场C座代签收，感谢使用中通快递，期待再次为您服务！",
          timestamp: "2020－07-11  16:20:00",
          step: [],
        },
        {
          classId: 8,
          title: "交易完成",
          detail: "订单交易成功",
          timestamp: "2020－07-14  13:16:04",
        },
      ],
    };
  },
  setup() {},
  mounted() {
    this.Time();
    this.init();
    console.log(this.logistcalInfo);
  },
  methods: {
    init() {
      this.orderGoodList = JSON.parse(
        sessionStorage.getItem("orderDetailList")
      );
      console.log(this.orderGoodList);
      this.orderInfo = JSON.parse(sessionStorage.getItem("orderInfo"));
      this.orderInfo.paymentAmount = this.toFixedTwo(
        this.orderInfo.paymentAmount
      );
      if (this.addressInfo) {
        this.addressInfo = JSON.parse(sessionStorage.getItem("addressInfo"));
      } else {
        this.addressInfo = this.orderInfo.receiveGoodsInfoEntity;
      }
      this.userInfo = this.$store.getters.getUserInfo;
    },
    toMyOrder() {
      this.$router.push("/order");
    },
    // 时分秒格式化函数
    countDown() {
      let h = parseInt((this.seconds / (60 * 60)) % 24);
      h = h < 10 ? "0" + h : h;
      let m = parseInt((this.seconds / 60) % 60);
      m = m < 10 ? "0" + m : m;
      let s = parseInt(this.seconds % 60);
      s = s < 10 ? "0" + s : s;
      this.count = h + "时" + m + "分" + s + "秒";
    },
    toMyCenter() {
      this.$router.push("/personalInfo");
    },
    //定时器没过1秒参数减1
    Time() {
      setInterval(() => {
        this.seconds -= 1;
        this.countDown();
      }, 1000);
    },
    // 保留两位小数方法
    toFixedTwo(price) {
      return Math.floor(price * 100) / 100;
    },
    // 完成支付
    paiedOrder() {
      let serialNo = this.orderInfo.serialNo;
      payOrderInfo(serialNo).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.$message.success("已完成支付");
          this.isPay = true;
        }
      });
    },
    // 查看物流信息完成确认收货
    viewLoisticall() {
      this.receiveDialogVisible = true;
    },
    // 确认收货
    confirmReceiveGood() {
      let serialNo = this.orderInfo.serialNo;
      confirmReceiveGoods(serialNo).then((res) => {
        if (res.code === 0) {
          this.$message.success("已确认收货");
          this.receiveDialogVisible = false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.main {
  .pageMain {
    display: flex;
    justify-content: center;
    .payPageBox {
      width: 1000px;
      display: flex;
      flex-direction: column;
      .payPageTit {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        .right {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #666;
          span {
            display: flex;
            justify-content: flex-start;
            margin: 0 20px;
            &:hover {
              color: #244d4d;
              font-weight: bold;
              cursor: pointer;
            }
          }
          .jiange {
            width: 1px;
            height: 15px;
            background-color: #ddd;
          }
        }
      }
      .payPageMiddle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .orderInfoTxt {
          display: flex;
          flex-direction: column;
          span {
            font-family: Microsoft Yahei;
            color: #333;
            font-size: 14px;
          }
          .payTime {
            color: #666;
            font-size: 12px;
            display: flex;
            align-items: center;
            .jiange {
              height: 15px;
              width: 2px;
              background-color: #ddd;
              margin: 0 10px;
            }
            span {
              display: flex;
              .time {
                color: #e31613;
                margin: 0 10px;
                font-size: 14px;
              }
            }
          }
        }
        .priceShow {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          .shouldPayMoney {
            display: flex;
            font-size: 14px;
            color: #666;
            font-weight: 400;
            align-items: center;
            .price {
              color: #e31613;
              font-size: 18px;
              font-weight: 700;
              margin: 0 5px;
            }
          }
          .detail {
            display: flex;
            align-items: center;
            color: #67a4ff;
            font-size: 12px;
            span {
              display: flex;
              &:hover {
                cursor: pointer;
              }
            }
            .size {
              font-size: 10px;
              margin: 0 0 0 5px;
            }
          }
        }
      }
      .orderDetailTxt {
        display: flex;
        border-top: 1px solid #d0d0d0;
        margin-top: 20px;
        flex-direction: column;
        font-size: 12px;
        padding: 20px;
        color: #666;
        .addres {
          display: flex;
          span {
            margin: 0 5px 0 0;
          }
          .preson {
            margin: 0 5px 0 10px;
          }
          .phone {
            margin: 0 10px 0 10px;
          }
        }
        .goodsName {
          margin: 5px 0;
          display: flex;
          .goodslist {
            display: flex;
            p {
              margin: 0 6px;
            }
          }
        }
      }
      .payPageType {
        position: relative;
        background: #fff;
        padding: 12px 30px;
        box-shadow: 0 6px 32px rgb(0 0 0 / 13%);
        z-index: 1;
        margin: 60px 0;
        min-height: 350px;
        .weixinPay {
          padding: 20px 0;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            height: 200px;
            width: 200px;
          }
          .buttonBox {
            position: absolute;
            bottom: 0;
            right: 0;
            padding: 10px;
            .el-button {
              border: 0;
              border-radius: 0;
              background-color: #244d4d;
              color: #fff;
              font-weight: 700;
              &:hover {
                background-color: #112e2e;
              }
            }
          }
        }
        .zhifubaoPay {
          padding: 20px 0;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            height: 200px;
            width: 200px;
          }
        }
      }
    }
  }
  .timeLine {
    padding: 0 0 0 60px;
    .el-timeline {
      .el-timeline-item {
        .el-timeline-item__wrapper {
          font-size: 14px;
          font-weight: 700;
          .titleContent {
            font-size: 12px;
            margin: 5px 0;
          }
        }
      }
    }
  }
}
</style>
